<!--
 * @Author: YTian
 * @Date: 2023-05-18 11:27:21
 * @LastEditTime: 2023-05-18 22:14:17
 * @Description: 搜索页面
 * @FilePath: \pcsong\src\views\search\Search.vue
-->
<script setup>
// ========= 导入路由 ========= //
import { useRoute, useRouter } from 'vue-router'

// ========= 获取全局api ========= //
import { api_search } from '@/global/api.ts'

// ========= 导入表格组件 ========= //
import Table from '@/components/Table.vue'

// ========= 导入卡片组件 ========= //
import Card from '@/components/Card.vue'

// ========= 导入vue api ========= //
import { watch, ref } from 'vue'

// ========= 导入按钮组件 ========= //
import { NTabs, NTabPane } from 'naive-ui'

const route = useRoute()

// & 获取路由对象
let keywords = route.query.keywords

// 1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单
let search_type = 1

// # 单曲的搜索数据
let song__links = ref(await api_search(keywords, search_type))
// # 歌单的搜索数据
let playlist__links = ref([])
// # 歌手的搜索数据
let singer__links = ref([])

watch(
	() => route.query.keywords,
	async (new__keywords) => {
		if (keywords !== new__keywords) {
			keywords = new__keywords
			keywords_up()
		}
	}
)

const keywords_up = async () => {
	const res = await api_search(keywords, search_type)

	if (search_type === 1) {
		song__links.value = res
		return
	}

	if (search_type === 100) {
		singer__links.value = res
		return
	}

	if (search_type === 1000) {
		playlist__links.value = res
		return
	}
}

const switch_key = {
	单曲: 1,
	歌手: 100,
	歌单: 1000
}

const card_switch = (data) => {
	if (data in switch_key) {
		search_type = switch_key[data]

		keywords_up()
	}
}

// & 获取路由对象
const router = useRouter()

/**
 * @description: 跳转到playlist并携带id
 * @param {*} name
 * @param {*} query
 * @return {*}
 */
const list_push = (id) => {
	router.push({
		name: 'playlist',
		query: {
			id
		}
	})
}

/**
 * @description: 跳转到singer并携带id
 * @param {*} name
 * @param {*} query
 * @return {*}
 */
const singer_push = (id) => {
	router.push({
		name: 'singer',
		query: {
			id
		}
	})
}
</script>

<template>
	<div class="search">
		<div class="search__title">搜索</div>
		<div>
			<n-tabs type="line" animated @update:value="card_switch">
				<n-tab-pane display-directive="show" name="单曲">
					<Table :song__list="song__links" />
				</n-tab-pane>
				<n-tab-pane display-directive="show" name="歌手">
					<Card :list="singer__links" @card_click="singer_push" />
				</n-tab-pane>
				<n-tab-pane display-directive="show" name="歌单">
					<Card :list="playlist__links" @card_click="list_push" />
				</n-tab-pane>
			</n-tabs>
		</div>
	</div>
</template>

<style scoped>
.search {
	width: 100%;
	height: 100%;

	padding: 15px 25px;

	display: grid;
	grid-template-rows: 30px 1fr;
	gap: 20px;
}

.search > *:nth-of-type(2) {
	overflow: auto;
}

.search__title {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-size: 32px;
	line-height: 40px;
	/* identical to box height */

	color: #000000;
}
</style>
